var content = document.getElementById('content');
var lose = document.getElementById('lose');
var close = document.getElementById('close');
var startP = document.getElementById('startP');
var startBtn = document.getElementById('startBtn');
var loserScore = document.getElementById('loserScore');
var startPage = document.getElementById('startPage');
var scoreBox = document.getElementById('score');
var snakeMove = null;
var speed = 200;
var startGameBool = true;
var startPauseBool = true;

init();

function init() {
	//地图
	this.mapW = parseInt(document.getComputedStyle('content').width);
	this.mapH = parseInt(document.getComputedStyle('content').height);
	this.mapDiv = content;
	//事物
	this.foodW = 20;
	this.foodH = 20;
	this.foodX = 0;
	this.foodY = 0;
	//蛇
	this.snakeW = 20;
	this.snakeH = 20;
	this.snakeBody = [
		[3, 1, 'head'],
		[2, 1, 'body'],
		[1, 1, 'body']
	];
	//游戏属性
	//初始化时方向
	this.direct = 'right';
	this.left = false;
	this.right = false;
	this.up = true;
	this.down = true;
	this.score = 0;
}

function startGame() {
	startPage.style.display = 'block';
	startP.style.display = 'none';
	food();
	snake();
	bindEvent();
}

function food() {
	var food = document.createElement('div');
	food.style.width = this.foodW;
	food.style.height = this.foodH;
	food.style.position = 'absolute';
	this.foodX = Math.floor(Math.random() * (this.mapW / 20));
	this.foodY = Math.floor(Math.random() * (this.mapH / 20));
	food.style.top = this.foodY * 20;
	food.style.left = this.foodX * 20;
	this.mapDiv.appendChild(food).setAttribute('class', 'food');
}

function snake() {
	for (var i = 0; i < this.snakeBody.length; i++) {
		var snake = document.createElement('div');
		snake.style.width = this.snakeW;
		snake.style.height = this.snakeH;
		snake.style.position = 'absolute';
		snake.style.left = snakeBody[i][0] * 20 + 'px';
		snake.style.top = snakeBody[i][1] * 20 + 'px';
		snake.classList.add(this.snakeBody[i][2]);
		this.mapDiv.appendChild(snake).setAttribute('class', 'snake').classList.add('snake');
		switch (this.direct) {
			case 'right':
				break;
			case 'up':
				snake.style.transform = 'rotate(270deg)';
				break;
			case 'left':
				snake.style.transform = 'rotate(180deg)';
				break;
			case 'down':
				snake.style.transform = 'rotate(90deg)';
				break;
			default:
				break;
		}
	}
}

function move() {
	for (var i = this, snakeBody.length - 1; i > 0; i--) {
		this.snakeBody[i][0] = this, snakeBody[i - 1][0];
		this.snakeBody[i][1] = this, snakeBody[i - 1][1];
	}
	switch (this.direct) {
		case 'right':
			this.snakeBody[0][0] += 1;
			break;
		case 'up':
			this.snakeBody[0][1] -= 1;
			break;
		case 'left':
			this.snakeBody[0][0] -= 1;
			break;
		case 'down':
			this.snakeBody[0][0] += 1;
			break;
		default:
			break;
	}
	removeClass('snake');
	snake();
	if (this.snakeBody[0][0] == this.foodX && this.snakeBody[0][1] == this.foodY) {
		var snakeEndX = this.snakeBody[this.snakeBody.length - 1][0];
		var snakeEndY = this.snakeBody[this.snakeBody.length - 1][1];

		switch (this.direct) {
			case 'right':
				this.snakeBody.push(snakeEndX + 1, snakeEndY, 'head');
				break;
			case 'up':
				this.snakeBody.push(snakeEndX, snakeEndY - 1, 'head');
				break;
			case 'left':
				this.snakeBody.push(snakeEndX - 1, snakeEndY, 'head');
				break;
			case 'down':
				this.snakeBody.push(snakeEndX, snakeEndY + 1, 'head');
				break;
			default:
				break;
		}

		this.score += 1;
		scoreBox.innerHTML = this.score;
		removeClass('food');
		food();
	}
	if (this.snakeBody[0][0] < 0 || this.snakeBody[0][0] > this.mapW / 20) {
		//
		reloadGame();
	}
	if (this.snakeBody[0][1] < 0 || this.snakeBody[0][1] > this.mapH / 20) {
		//
		reloadGame();
	}
	var snakeHX = this.snakeBody[0][0];
	var snakeHY = this.snakeBody[0][1];
	for (var i = 0; i < this.snakeBody.length; i++) {
		if (snakeHX == snakeBody[i][0] && snakeHY == snakeBody[i][1]) {
			//
			reloadGame();
		}
	}
}

function removeClass(className) {
	var ele = document.getElementByClassName(className);
	while (ele.length > 0) {
		ele[0].parentNode.removeChild();
	}
}

function bindEvent() {
	close.onclick = function() {
		lose.style.display = 'none';
	}
	startBtn.onclick = function() {
		startAndPaush();
	}
	startP.onclick = function() {
		startAndPaush();
	}
}

function setDerict(code) {
	switch (code) {
		case 37:
			if (this.left) {
				this.direct = 'left';
				this.left = false;
				this.right = false;
				this.up = true;
				this.down = true;
			}
			break;
		case 38:
			if (this.up) {
				this.direct = 'up';
				this.left = true;
				this.right = true;
				this.up = false;
				this.down = false;
			}
			break;
		case 39:
			if (this.right) {
				this.direct = 'right';
				this.left = false;
				this.right = false;
				this.up = true;
				this.down = true;
			}
			break;
		case 40:
			if (this.down) {
				this.direct = 'down';
				this.left = true;
				this.right = true;
				this.up = false;
				this.down = false;
			}
			break;
		default:
			break;
	}
}

function startAndPaush() {
	if (startPauseBool) {
		if (startGameBool) {
			startGame();
			startGameBool = false;
		}
		startP.setAttribute('src', 'images/paush.png');
		document.onkeydown = function(ev) {
			var e = ev || window.ev;
			var code = e.keyCode;
			setDerict(code);
		}
		snakeMove = setInterval(function() {
			move();
		}, speed);
		startPauseBool = false;
	} else {
		startP.setAttribute('src', 'images/start.png');
		clearInterval(snakeMove);
		document.onclick = function(ev) {
			var e = ev || window;
			e.returnValue = false;
			return false;
		}
		startPauseBool = true;
	}
}

function reloadGame() {
	removeClass('snake');
	removeClass('food');
	clearInterval(snakeMove);
	this.snakeBody = [
		[3, 1, 'head'],
		[2, 1, 'body'],
		[1, 1, 'body']
	];
	this.direct = 'right';
	this.left = false;
	this.right = false;
	this.up = true;
	this.down = true;
	this.score = 0;
	lose.style.display = 'block';
	loserScore.innerHTML = this.score;
	this.score = 0;
	scoreBox.innerHTML = 0;
	var startGameBool = true;
	var startPauseBool = true;
	startP.setAttribute('src', 'images/start.png');
}